<template>
  <v-menu
    :mode="menuMode"
    :selectedKeys="[selectedKeys]"
    @click="handleClickMenu"
    :inlineIndent="14"
    :openKeys="openKeys"
    :isFirstClickOpen="false"
    :subMenuCloseDelay="0"
    :subMenuOpenDelay="0"
    :maxShowOptions="menuMaxShowOptions"
    :maxShowOptionsHeight="40"
    :openTransition="false"
    @openChange="onOpenChange"
  >
    <template v-for="item in menuList">
      <template v-if="item.hidden == undefined || item.hidden == false">
        <v-menu-item
          :topDivider="item.meta.topDivider"
          :bottomDivider="item.meta.bottomDivider"
          :key="!item.children ? item.name : item.children[0].name"
          v-if="!item.children || (item.children.length && item.children.length <= 1 && item.children[0].name.indexOf('_index') >= 0)"
        >
          <v-icon v-if="item.icon" :type="item.icon"></v-icon>
          <icon-font v-else-if="item.iconfont" :type="item.iconfont" class="menu-iconfont" />
          <span>{{ item.meta.title }}</span>
        </v-menu-item>
        <sub-menu v-else :menuInfo="item" :key="item.name" />
      </template>
    </template>
  </v-menu>
</template>

<script>
import SubMenu from "./SubMenu";
export default {
  components: {
    "sub-menu": SubMenu,
  },
  props: {
    selectedKeys: {
      type: String,
      default: "",
    },
    menuList: {
      type: Array,
      required: true,
    },
    menuMode: {
      type: String,
      default: "horizontal",
    },
    menuMaxShowOptions: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      rootSubmenuKeys: [],
      openKeys: [],
    };
  },
  computed: {},
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find((key) => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    updateOpenKeys() {},
    handleClickMenu({ item, key, keyPath }) {
      this.$emit("on-click", { item, key, keyPath });
    },
  },
  watch: {
    $route(to) {
      this.updateOpenKeys();
    },
  },
  mounted() {
    this.updateOpenKeys();
  },
};
</script>
<style lang="less" scoped></style>
